<template>
  <basic-container :btnFlag=true>
    <!--<div @click="testFileDownload">附件下载</div>-->
    <div class="card-border">
      <div>
        <div class="step-title"
             v-if="projectForm.category=='A'">
          <img :src="`${publicPath}img/arrows.png`"
               class="step-img">
          登记流程
        </div>
        <div class="step-title"
             v-if="projectForm.category!='A'">
          <img :src="`${publicPath}img/arrows.png`"
               class="step-img">
          申请流程
        </div>
      </div>
      <div class="step-group"
           v-if="projectForm.category!='A'">
        <el-steps :active="0">
          <el-step title="申请"
                   icon="el-icon-edit"></el-step>
          <el-step title="初审"
                   icon="el-icon-upload"></el-step>
          <el-step title="审核"
                   icon="el-icon-edit"
                   class="transform-deg"></el-step>
          <el-step title=""
                   icon="el-icon-edit"
                   class="transform-deg_line"></el-step>
          <el-step title="赋码反馈(一般类、备案类)"
                   icon="el-icon-upload"
                   class="beian"></el-step>
          <el-step title="清单报批"
                   icon="el-icon-upload"
                   style="margin-top: 35px;margin-left: -144px;"></el-step>
          <el-step title="政府批复"
                   icon="el-icon-picture"
                   style="margin-top: 35px;"></el-step>
          <el-step title="赋码反馈"
                   icon="el-icon-upload"
                   style="margin-top: 35px;"></el-step>
        </el-steps>
      </div>

      <div style="font-weight:600;margin-top: 20px;"
           v-if="projectForm.category=='A'">登记信息:</div>
      <div style="font-weight:600;margin-top: 20px;"
           v-if="projectForm.category!='A'">申请信息:</div>
      <el-form label-width="130px"
               :model="projectForm"
               :rules="infosrules"
               ref="projectForm">
        <el-row style="margin-bottom: 6px;">
          <el-col :span="22"
                  style="margin-top: 27px;">
            <el-form-item class="form-item"
                          label="规划名称"
                          prop="title">
              <el-input v-model="projectForm.title"
                        placeholder="请输入规划名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="规划类型"
                          prop="category">
              <el-select v-model="projectForm.category"
                         placeholder="请选择规划类型"
                         :disabled='true'>
                <el-option v-for="item in categoryDic"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="规划期限"
                          prop="startDate">
              <el-date-picker v-model="projectForm.startDate"
                              type="year"
                              style="width: 120px"
                              placeholder="选择年"
                              value-format="yyyy"
                              format="yyyy">
              </el-date-picker>
              <span style="margin-left: 5px;margin-right: 5px">至</span>
              <el-date-picker v-model="projectForm.endDate"
                              style="width: 120px"
                              type="year"
                              placeholder="选择年"
                              value-format="yyyy"
                              format="yyyy">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申报(牵头)单位"
                          prop="orgCode"
                          class="form-item">
              <span style="margin-left:10px;font-size: 16px">{{projectForm.orgName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button size="small"
                       type="primary"
                       icon="el-icon-plus"
                       style="margin-left: 10px;"
                       @click="clickjoint">
              协同编制部门
            </el-button>
          </el-col>
        </el-row>
        <el-row v-if="projectForm.supportDeptName">
          <el-col :span="24">
            <el-form-item class="form-item"
                          label="协同编制部门">
              {{projectForm.supportDeptName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="拟发布层级"
                          prop="planningLevel">
              <el-select v-model="projectForm.planningLevel"
                         placeholder="请选择">
                <el-option v-for="item in planningLevelDic"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="拟发布时间"
                          prop="releaseDate">
              <el-date-picker v-model="projectForm.releaseDate"
                              type="month"
                              placeholder="选择年月"
                              value-format="yyyy-MM"
                              format="yyyy-MM">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="审批机关级别"
                          prop="approvingAuthorityLevel">
              <el-select v-model="projectForm.approvingAuthorityLevel"
                         placeholder="请选择">
                <el-option v-for="item in authorityLevelDic"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="审批机关性质"
                          prop="approvingAuthorityNature">
              <el-select v-model="projectForm.approvingAuthorityNature"
                         placeholder="请选择">
                <el-option v-for="item in natureDIC"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item class="form-item"
                          label="联系人"
                          prop="contactName">
              <el-input v-model="projectForm.contactName"
                        placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <!--<el-col :span="10"-->
                  <!--offset="2">-->
          <el-col :span="10" >
            <el-form-item class="form-item"
                          label="联系电话"
                          prop="contactNumber">
              <el-input v-model="projectForm.contactNumber"
                        placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item"
                          label="经费来源"
                          prop="financialSource">
              <el-input type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入经费来源"
                        v-model="projectForm.financialSource"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item"
                          label="立项依据"
                          prop="basis">
              <quill-editor ref="basisEditor"
                            v-model="projectForm.basis"
                            :content="basisContent"
                            :options="basisOption">
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item class="form-item">
              <el-upload class="uploadFile"
                         action="string"
                         :limit="1"
                         :on-exceed="tipFileOne"
                         :http-request="basisSubmitUploadMixin"
                         :on-change="basisFileChangeMixin"
                         :on-preview="basishandlePreviewMixin"
                         :on-remove="basishandleRemoveMixin"
                         :auto-upload="true"
                         :file-list="basisFileListMixin">
                <el-button size="small"
                           type="primary">附件上传</el-button>
                <div slot="tip"
                     class="el-upload__tip"
                     style="margin-top: -8px;">请上传依据材料</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item"
                          label="主要内容"
                          prop="content">
              <quill-editor ref="contentEditor"
                            v-model="projectForm.content"
                            :content="content"
                            :options="editorOption">
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item"
                          label="相关材料"
                          prop="content">
              <el-upload ref="uploadrelated"
                         action="string"
                         :http-request="submitUploadMixin"
                         :on-preview="handlePreviewMixin"
                         :on-remove="handleRemoveMixin"
                         :file-list="fileListMixin"
                         :auto-upload="true"
                         :on-change="fileChangeMixin">
                <el-button slot="trigger"
                           size="small"
                           type="primary">点击上传</el-button>
                <span slot="tip"
                      class="el-upload__tip">&nbsp;&nbsp;&nbsp;&nbsp;上传工作方案、工作计划等相关材料</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-submit">
        <el-button type="warning"
                   @click.stop="projectTS()">暂存</el-button>
        <el-button type="primary"
                   @click.stop="commitList()">确认</el-button>
        <el-button type="info"
                   @click.stop="goBack()">关闭</el-button>
      </div>

      <el-dialog :visible.sync="dialogVisiblesubmit"
                 width="70%"
                 title="信息确认">
        <div class="dial">
          <!--          <bostech-detail :detail-data="detailData"></bostech-detail>-->
          <submit-confirm :register-info="projectForm"
                          :basis-file-list="basisFileListMixin"
                          :file-list="fileListMixin">

          </submit-confirm>
        </div>
        <div style="text-align: center;">
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisiblesubmit = false">取 消</el-button>
            <el-button type="primary"
                       :disabled="isDisabled"
                       @click="commitYes">确定提交</el-button>
          </span>
        </div>
      </el-dialog>
      <dept-check :visible="supportDeptVisible"
                  @getCheckInfo="getCheckInfo"
                  @cancel="cancelSupportDept"></dept-check>
    </div>
  </basic-container>
</template>
<script>
import { PROJECT_DIC } from "@/const/dict";
import { projectRules } from "@/const/infoRules";
import { registerInfo, projectSaveAndSubmit } from "@/api/planning/project";
import getDetailData from "@/mixins/getDetailData";
import { getDeptTree, downloadFile, filedownload, UploadFile, getfileinfopage } from "@/api/system";
import { mapGetters } from "vuex";
import relatedfile from "@/mixins/relatedfile";
import basisfile from "@/mixins/basisfile";
import submitConfirm from "@/components/registerinfo/submitConfirm"

export default {
  name: "applyFor",
  components: { submitConfirm },
  mixins: [relatedfile, basisfile, getDetailData()],
  data () {
    return {
      idsarray: '',  //附件id数组，用于相关材料多个附件传给详情组件
      multiplefiles: [],  //多个文件的信息
      basisfilename: '',
      publicPath: process.env.BASE_URL,
      categoryDic: PROJECT_DIC.CATEGORY,
      orgCodeDic: PROJECT_DIC.ORG_CODE,
      planningLevelDic: PROJECT_DIC.PLANNING_LEVEL,
      authorityLevelDic: PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
      natureDIC: PROJECT_DIC.APPROVING_AUTHORITY_NATURE,
      dialogVisiblesubmit: false,//项目详情弹出框
      projectForm: {
        areaCode: '330000',
        fileId: null,
        basisFileId: null,
        startDate: null,
        endDate: null,
      },
      // 主要内容
      content: '',
      editorOption: {
        // something config
        modules: {
          toolbar: null
        },
        placeholder: '请输入主要内容'
      },
      // 立项依据
      basisContent: '',
      basisOption: {
        // something config
        modules: {
          toolbar: null
        },
        placeholder: '请输入立项依据'
      },
      supportDeptVisible: false,//申报单位树弹框标志
      infosrules: projectRules,// 表单验证
      isDisabled: false,
    };
  },
  created () {
    this.projectForm.category = this.$route.query.chooseFlag;
    this.categoryDic = this.categoryDic.filter(
      item => item.value == this.$route.query.chooseFlag
    );
    this.projectForm.orgCode = this.deptInfo.deptId;
    this.projectForm.orgName = this.deptInfo.name
  },
  computed: {
    editor () {
      return this.$refs.contentEditor.quill
    },
    basisEditor () {
      return this.$refs.basisEditor.quill
    },
    ...mapGetters([
      "deptInfo"
    ])
  },
  mounted () {
    // 设置编辑器高度
    this.editor.container.style.height = '150px';
    this.basisEditor.container.style.height = '150px'
    if (this.projectForm.category == 'A') {
      this.infosrules.title = [{ pattern: /^(.+)(\u56fd\u6c11\u7ecf\u6d4e\u548c\u793e\u4f1a\u53d1\u5c55\u7b2c).+(\u4e2a\u4e94\u5e74\u89c4\u5212\u7eb2\u8981)$/, message: '发展规划之全称必须是“XX国民经济和社会发展第XX个五年规划纲要”这样的格式' }, { required: true, message: "请输入规划名称", trigger: "blur" }]
    } else {
      this.infosrules.title = [{ required: true, message: "请输入规划名称", trigger: "blur" }]
    }
  },
  methods: {
    // 返回首页
    goHome () {
      this.$router.push({ path: "/wel" });
    },
    goBack () {
      this.$router.go(-1);
    },
    // 下载文件
    download (data, filename) {
      if (data == null) {
      } else {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click()
      }
    },
    // 弹出协同部门弹框
    clickjoint () {
      this.supportDeptVisible = true
    },
    cancelSupportDept (deptIds, deptNames) {
      this.supportDeptVisible = false;
    },
    getCheckInfo (deptIds, deptNames) {
      this.projectForm.supportDeptName = deptNames;
      this.projectForm.supportDeptIds = deptIds;
      this.supportDeptVisible = false;
    },
    // 暂存
    projectTS () {
      if (this.projectForm.startDate == null || this.projectForm.endDate == null) {
        this.$notify({
          title: "提醒",
          type: "warning",
          message: "请填写规划期限",
          duration: 2000
        });
        return;
      }
      this.$refs.projectForm.validate(valid => {
        if (valid) {
          registerInfo(this.projectForm).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: "成功",
                message: "暂存成功",
                type: "success",
                duration: 2000
              });
              this.$router.go(-1);
            }
          });
        }
      })
    },
    // 提交
    projectSaveAndCommit () {

      this.$refs.projectForm.validate(valid => {
        if (valid) {
          this.isDisabled = true;
          projectSaveAndSubmit(this.projectForm).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: "成功",
                message: "提交成功",
                type: "success",
                duration: 2000
              });
              this.$router.go(-1);
            }
          }).catch(()=>{
            this.isDisabled = false;
          })
        } else {
          this.isDisabled = false;
        }
      });
    },
    //确认提交的弹出框
    async commitList () {
      if (this.fileListMixin.length == 0) {
        this.multiplefiles = [];
      }
      var arr = [];
      this.idsarray = '';
      if (this.fileListMixin.length != 0) {
        for (var item in this.fileListMixin) {
          arr.push(this.fileListMixin[item].url);
        }
        this.idsarray = arr.join(",");
      }
      if (this.idsarray != "") {
        await getfileinfopage(Object.assign({
          current: 1,
          size: 100,
          fileIds: this.idsarray
        })).then(response => {
          this.multiplefiles = response.data.data.records;
        }).catch(
        )
      }
      if (this.projectForm.startDate == null || this.projectForm.endDate == null) {
        this.$notify({
          title: "提醒",
          type: "warning",
          message: "请填写规划期限",
          duration: 2000
        });
        return;
      }

      this.$refs.projectForm.validate(valid => {
        if (valid) {
          if (parseInt(this.projectForm.startDate) > parseInt(this.projectForm.endDate)) {
            this.$notify({
              title: "提醒",
              type: "warning",
              message: "规划期限开始时间不能大于结束之间",
              duration: 2000
            });
            return;
          }
          this.dialogVisiblesubmit = true;
          //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
          var arr = [];
          for (var item in this.fileListMixin) {
            arr.push(this.fileListMixin[item].url);
          }
          this.projectForm.fileId = arr.join(",");
          this.getDetailDataMins(this.projectForm)
        }
      });
    },
    commitYes () {
      this.projectSaveAndCommit();
    },
  }
};
</script>
<style lang="scss">
.transform-deg {
  .el-step__line {
    transform: rotate(-14deg);
    margin-top: -17px;
  }
}
.transform-deg_line {
  margin-left: -145px;

  .el-step__line {
    transform: rotate(16deg);
    margin-top: 17px;
  }
}
.beian {
  margin-top: -62px;
  margin-left: 24px;

  .el-step__line {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
.step-title {
  display: inline-block;
  border-bottom: solid #ec950a;
  padding-bottom: 10px;
  font-weight: 600;
}
.step-button {
  float: right;
}
.step-img {
  width: 25px;
  position: relative;
  left: 0px;
  top: 7px;
}
.step-group {
  margin: 5rem 0;
  margin-bottom: 1px;
}
.form-item {
  font-weight: 600;
}
.form-group {
  margin-top: 2rem;
}
.form-label {
  font-weight: 600;
  margin-right: 2rem;
}
.form-padding {
  padding-left: 50px;
}
.form-label-small {
  font-size: 14px;
  margin-right: 12px;
  display: inline-block;
  min-width: 101px;
}
.form-submit {
  text-align: center;
}
.card-border {
  border: 1px solid #d2d2d2;
  padding: 12px;
}
.dial {
  width: 100%;
  overflow: auto;
  height: 420px;
}
.ql-upload {
  background: url("../../../../public/img/user.png");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>
<style>
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 0 8px;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: url("../../../../public/img/upload.png");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}

.el-step.is-horizontal .el-step__line {
  height: 3px;
}
</style>





